<template>
	<view>
		<!-- 封装 -->
		<topic-info :info="info"></topic-info>
		<!-- 分割线 -->
		<divider></divider>
		<view class="flex px-2 align-center" hover-class="bg-light" v-for="(item,index) in hotList" :key="index">
			<text class="iconfont icon-xihuan text-main"></text>
			<!-- text-ellipsis文字超出...隐藏 -->
			<text class="font-md text-dark text-ellipsis">{{item.title}}</text>
		</view>
		<divider></divider>

		<!-- tab -->
		<view class="flex align-center py-2">
			<view class="flex-1  flex align-center justify-center " v-for="(item,index) in tabBars" :key="index" @click="changeTab(index)"
			 :class="tabindex===index ? 'font-lg font-weight-bold text-main':'font-md'">
				{{item.name}}
			</view>

		</view>

		<!-- 列表 -->
		<!-- listData 计算属性 -->
		<template v-if="listData.length>0">
			<block v-for="(item,index) in listData" :key="index">
				<common-list :item="item" :index="index"> </common-list>
			</block>
		</template>
		<template v-else>
			<no-thing></no-thing>
		</template>
		<load-more :loadmore="loadtext"> </load-more>


		<!-- <view class="lb1" v-if="tabbarindex===0">
		 	列表1
		 </view> -->
		<!-- <view class="lb2" v-else>
		 	列表2
		 </view> -->
	</view>
</template>

<script>
	import topicInfo from '@/components/topic-detail/topic-info.vue'
	import CommonList from "@/components/common/common-list.vue"
	import loadMore from "@/components/common/load-more.vue"
	const demo = [{
			username: "昵称",
			userpic: "/static/topboy.png", //头像
			newstime: "2020-12-10下午4.30", //时间
			isFollow: false, //判断当前用户是否已经关注
			title: "我是标题", //标题
			titlepic: "/static/demo/banner2.jpg", //标题下的图片

			support: {
				// 点赞 反赞
				type: "",
				support_count: 0,
				unsupport_count: 0,
			},
			// 评论
			comment_count: 0,
			// 分享
			share_num: 0,
		},
		{
			username: "昵称",
			userpic: "/static/topboy.png", //头像
			newstime: "2020-12-10下午4.30", //时间
			isFollow: false, //判断当前用户是否已经关注
			title: "我是标题", //标题
			support: {
				// 点赞 反赞
				type: "",
				support_count: 0,
				unsupport_count: 0,
			},
			// 评论
			comment_count: 0,
			// 分享
			share_num: 0,
		},
	];
	export default {
		components: {
			topicInfo,
			CommonList,
			loadMore
		},
		data() {
			return {
				info: {

					cover: "/static/demo/topicpic/1.jpeg",
					title: "#话题名称#",
					desc: "话题描述",
					today_count: 0,
					news_count: 10
				},
				hotList: [{
						title: "新人必读实战第二季实战商城新人必读实战第二季实战商城"
					},
					{
						title: "新人必读实战第二季实战商城"
					}
				],
				tabindex: 0,
				tabBars: [{
					name: "默认"
				}, {
					name: "最新"
				}],
				list1: [], //默认的数据
				loadtext1: "上拉加载更多",
				list2: [], //最新的数据
				loadtext2: "上拉加载更多",
			}

		},
		onLoad(e) {
			let res = JSON.parse(e.detail)
			console.log(JSON.parse(e.detail))
			this.list1 = demo; //测试数据赋值给list1

		},
		computed: {
			// 列表数据
			listData() {
				return this['list' + (this.tabindex + 1)] //this.===this['']
				// if(this.tabindex==0){
				// 	return this.list1
				// }
				// else{
				// 	return this.list2
				// }
			},
			// 当前下拉加载
			loadtext() {
				return this['loadtext' + (this.tabindex + 1)]
			}
		},
		// 触底事件
		onReachBottom() {
			this.loadmore()
		},
		methods: {
			changeTab(index) {
				console.log(index)
				this.tabindex = index;
			},
			// 上拉加载更多
			loadmore(){
				// 拿到当前的列表
				let  index=this.tabindex;
				// 判断他的状态---是否为可加载状态
				console.log(this.loadtext)
				//处在加载状态
				if(this.loadtext!=="上拉加载更多")  return; //处在加载状态什么也不做
				 
				//把他的状态改为加载中...
				this['loadtext'+(index+1)]="加载中...";
				// 请求数据
				setTimeout(()=>{
					// 赋值最新的数据
					this['list'+(index+1)]=[...this['list'+(index+1)],...this['list'+(index+1)]];
					// 状态改为上拉加载更多
					this['loadtext'+(index+1)]="上拉加载更多";
				},2000)
				
			}
		}
	}
</script>

<style>
	.filter {
		/* 背景图模糊状态 */
		filter: blur(10px);
	}
</style>
